<template>
  <div class="edit-header">
    <div class="left">
      <div class="home">
        <router-link to="/home">
          <el-icon class="home" title="首页">
            <HomeFilled />
          </el-icon>
        </router-link>
      </div>
      <!-- <div class="panel"> 
         <div class="text">面板显示</div>
        <div class="line"></div>
         <div class="operate">
          <div
            class="item"
            v-for="item in operateList"
            :key="item.name"
            @click="handleClick(item.name)"
          >
            <el-tooltip effect="dark" :content="item.text" placement="bottom">
              <svg-icon
                :name="item.name"
                :color="item.isSelect ? item.color : '#0084FE'"
              ></svg-icon>
            </el-tooltip>
          </div>
        </div> 
      </div>-->
      <div class="tool">
        <el-button size="small" plain @click="setback" :icon="RefreshLeft"
          :disabled="btnDisable.leftDisable">撤销</el-button>
        <el-button size="small" plain @click="setforward" :icon="RefreshRight"
          :disabled="btnDisable.rightDisable">恢复</el-button>
      </div>
    </div>
    <div class="center">
      <div class="title">我的项目</div>
    </div>
    <div class="right">
      <div class="operate">
        <div class="preview">
          <el-button size="small" plain :icon="CaretRight" @click="handlePreview">预览</el-button>
        </div>
        <el-button size="small" plain :icon="Collection">保存</el-button>
      </div>
      <div class="user">
        <div class="theme">
          <el-icon class="grid">
            <Sunny />
          </el-icon>
        </div>
        <el-avatar :size="30" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
      </div>
    </div>
  </div>
</template>

<script setup name="EditHeader">
import { ref, computed } from "vue";
import { useStore } from "vuex";
import {
  HomeFilled,
  CaretRight,
  RefreshLeft,
  RefreshRight,
  Sunny,
  Collection,
} from "@element-plus/icons-vue";
import { setSessionStorage } from "@/utils";

let store = useStore();
let btnDisable = computed(() => {
  let currentIndex = store.state.chartEditStore.currentIndex;
  let historyList = store.state.chartEditStore.historyList || [];
  return {
    leftDisable: currentIndex == 0,
    rightDisable: currentIndex == historyList.length,
  };
});
let chartEditStore = computed(() => {
  return store.state.chartEditStore;
});
function setback() {
  store.commit("chartEditStore/SET_BACK");
}
function setforward() {
  store.commit("chartEditStore/SET_FORWARD");
}

// 图表显隐控制
const operateList = ref([
  {
    name: "charts",
    color: "#666666",
    text: "图表组件",
    isSelect: false,
  },
  {
    name: "layers",
    color: "#666666",
    text: "图层控制",
    isSelect: false,
  },
  {
    name: "details",
    color: "#666666",
    text: "详情设置",
    isSelect: false,
  },
]);

const handleClick = (name) => {
  const item = operateList.value.find((item) => item.name === name);
  if (item) {
    item.isSelect = !item.isSelect;
  }
  store.commit("chartLayoutStore/SET_LAYOUT", {
    key: name,
    val: !item.isSelect,
  });
};

const handlePreview = () => {
  setSessionStorage("CHART_STORAGE_LIST", chartEditStore.value);
  window.open("#/preview", "_blank");
};
</script>

<style lang="scss" scoped>
$height: 50px;

.edit-header {
  height: $height;
  padding: 0 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #d9d9d9;

  .left {
    width: 30%;
    display: flex;
    justify-content: space-between;

    .home {
      flex: 1;
      font-size: 22px;
      color: #666666;

      &:hover {
        background-color: rgba(46, 51, 56, 0.09);
      }
    }

    .panel {
      flex: 2;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 5px;
      font-size: 12px;
      background-color: #d9d9d9;
      border-radius: 2px;

      .text {
        min-width: 50px;
        margin-right: 10px;
      }

      .line {
        width: 2px;
        height: 100%;
        border-left: 1px solid #fff;
        padding-left: 10px;
      }

      .operate {
        width: 100px;
        height: 100%;
        display: flex;
        justify-content: space-between;

        .item {
          display: flex;
          align-items: center;
          width: 20px;
          height: 20px;
          cursor: pointer;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .tool {
      flex: 3;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }

  .right {
    width: 30%;
    display: flex;
    justify-content: flex-end;

    .operate {
      flex: 2;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      a {
        text-decoration: none;
      }

      .preview {
        margin-right: 10px;
      }

      // :deep(.el-button) {
      //   border-color: var(--el-color-primary);
      //   color: var(--el-color-primary);
      // }
    }

    .user {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex: 1;

      .theme {
        margin-right: 20px;
        cursor: pointer;
      }
    }
  }

  .center {
    flex: 1;
    display: flex;
    justify-content: center;

    .title {
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 14px;

      .grid {
        margin-right: 10px;
      }
    }
  }
}
</style>
